<template>
  <view style="height: 100%;" v-model="collection">
    <!-- 分享canvas -->
    <view class="share-canvas">
      <canvas
        :style="{ height: `` }"
        class="canvas"
        canvas-id="testCanvas"
      ></canvas>
    </view>
    <view class="big_img">
      <!-- 预览图 -->
      <image
        v-if="!checkVideo && type == 'img'"
        @click="openFile"
        :src="collection.medium_url"
        @touchstart="touchStart"
        @touchend="touchEnd"
        mode="widthFix"
        class="big-cover"
      ></image>

      <image
        class="big-long"
        v-else-if="!checkVideo && (type == 'audio' || type == 'video')"
        @click.stop="openFile"
        :src="collection.cover_url"
        @longtap.stop="savePicture(collection.medium_url)"
      ></image>
      <!-- @longpress="savePicture(collection.medium_url)" -->
      <!-- 音视频文件播放图标 -->
      <view v-if="(showIcon && !checkAudio)" class="big-play">
        <image @click="openFile" src="/static/play.png" mode="scaleToFill" />
      </view>
      <!-- 播放视频 -->
      <view class="check-video" v-if="checkVideo">
        <video
          ref="video"
          :autoplay="true"
          :src="collection.medium_url"
        ></video>
      </view>
      <!-- 音频控件 -->
      <view class="check-audio" v-if="checkAudio">
        <view class="audio-icon" @click="togglePlay">
          <image :src="`/static/${playState}-fill.png`" mode="scaleToFill" />
        </view>
        <view class="audio-now">
          {{ parseInt(nowTime / 60) }}:{{
            nowTime % 60 < 10 ? '0' + (nowTime % 60) : nowTime % 60
          }}
        </view>
        <view class="audio-progress" @touchend="changeTime">
          <u-slider
            ref="slider"
            min="0"
            :max="totalTime"
            v-model="nowTime"
            inactive-color="rgb(154,153,154)"
            active-color="#fff"
          ></u-slider>
        </view>
        <view class="audio-time">
          {{ parseInt(totalTime / 60) }}:{{
            totalTime % 60 < 10 ? '0' + (totalTime % 60) : totalTime % 60
          }}
        </view>
        <!-- 播放状态图标 -->
        <view
          @click="togglePlay"
          class="audio-music"
          :style="{ transform: animation }"
        >
          <image src="/static/music.png" mode="scaleToFill" />
          <image
            v-if="playState == 'play'"
            class="disable"
            src="/static/disable.png"
            mode="scaleToFill"
          />
        </view>
      </view>
    </view>
    <view
      class="collection_detail"
      style="background-color: #181816; padding-bottom: 200rpx;"
    >
      <view class="collection_header">
        <view class="collection_name" style="font-size: 36rpx; color: #fff;">
          {{ collection.name }}
        </view>
        <view
          class="collection_subTitle"
          style="display: flex; justify-content: space-between;"
        >
          <!-- 藏品拥有者 -->
          <view class="owner">
            由
            <text class="owner-user">{{ holdPerson }}</text>
            拥有
          </view>
          <!-- 藏品序号 -->
          <view class="Serial_number">序号#{{ collection.serialNo }}</view>
        </view>
      </view>
      <view class="collection_content">
        <view class="host">
          <text>发行方</text>
          <text style="margin-left: 40rpx; color: #ccc;">
            {{ collection.brand_name }}
          </text>
        </view>
        <view class="issue_num">
          <text>发行数量</text>
          <text>
            {{ collection.show_number }}
          </text>
        </view>
        <view class="collection_nft_id">
          <view class="nft_id">
            <text>数字藏品ID</text>
            <view class="icon" @click="copy(collection.nft_id)">
              <u-icon name="order" size="60" color="#fff"></u-icon>
            </view>
          </view>
          <view class="collection-id">
            {{ collection.nft_id }}
          </view>
        </view>
        <view class="collection_describe">
          <view class="collection-title">藏品说明</view>
          <view class="collection-desc" v-html="collection.intro"></view>
        </view>
        <!-- <view class="link_history" style="margin-top: 80rpx;">
					<text>链上转移历史</text>
				</view> -->
        <view class="hold_time" style="margin: 87rpx 0;">
          <text>持有时间：{{ collection.diff_days }}天</text>
        </view>
      </view>
    </view>
    <!-- 藏品操作方法按钮固定 -->
    <view class="footer_method">
      <view class="btn_box">
        <!-- <view class="transfer_btn" @click="transfer">
					<button>转赠他人</button>
				</view> -->
        <view class="poster_btn">
          <view class="button" @click="jump">查看海报</view>
        </view>
        <!-- <view class="poster_btn" v-if="type == 'audio' || type == 'video'">
          <view class="button" @click="openFile">查看主文件</view>
        </view> -->
      </view>
    </view>
    <!-- 转赠弹出 -->
    <u-popup
      :show="transferPop"
      :round="20"
      @close="close"
      @open="open"
      mode="center"
      :safeAreaInsetBottom="false"
      :closeOnClickOverlay="true"
      :safeAreaInsetTop="false"
    >
      <view class="transfer_box">
        <view class="transfer_content">
          <view class="title">转赠他人</view>
          <view class="subTitle">在“我的”页面，获取区块链个人账户地址</view>
          <input
            v-model="nft_id"
            placeholder="请输入接收方区块链个人账户地址"
          />
          <view style="font-size: 24rpx; text-align: center; color: crimson;">
            *由于政策原因，目前只支持同名下藏品转移
          </view>
        </view>
        <view class="submit_btn">
          <button @click="transferCancel()">取消</button>
          <button @click="transferConfirm()">确认</button>
        </view>
      </view>
    </u-popup>
    <!-- 查看主文件 -->
    <CheckFile :info="fileInfo" ref="file" />
  </view>
</template>

<script>
import api from '@/request/api.js'
import save from '@/common/saveImg.js'
import CheckFile from '../details/component/CheckFile.vue'
import jWeixin from '@/node_modules/jweixin-module/lib/index.js'

export default {
  data() {
    return {
      collection: {},
      holdPerson: '',
      transferPop: false,
      systemWidth: '',
      collectionId: '',
      playState: 'pause', // 播放状态
      type: '', // 文件类型
      timer: '',
      showIcon: false,
      checkVideo: false, // 显示视频
      checkAudio: false, // 显示音频
      onChanges: false,
      onChangePlay: false,
      isLong: false,
      totalTime: 0, // 音频总时长(时)
      fileInfo: {}, // 藏品文件信息
      fileAudio: '', // 音频文件
      nowTime: 0,
      launch: false,
      ua: '',
      timer: '',
      // 文件类型列表
      fileType: {
        // 图片
        img: {
          url: '/static/school/file/img.png',
          class: 'imgs',
          name: '图文',
          type: 'img',
        },
        png: {
          url: '/static/school/file/img.png',
          class: 'video',
          name: '图片',
          type: 'img',
        },
        jpg: {
          url: '/static/school/file/img.png',
          class: 'video',
          name: '图片',
          type: 'img',
        },
        ico: {
          url: '/static/school/file/img.png',
          class: 'video',
          name: '图片',
          type: 'img',
        },
        jpeg: {
          url: '/static/school/file/img.png',
          class: 'video',
          name: '图片',
          type: 'img',
        },
        jpeg: {
          url: '/static/school/file/img.png',
          class: 'video',
          name: '图片',
          type: 'img',
        },
        bmp: {
          url: '/static/school/file/img.png',
          class: 'video',
          name: '图片',
          type: 'img',
        },
        svg: {
          url: '/static/school/file/img.png',
          class: 'video',
          name: '图片',
          type: 'img',
        },
        gif: {
          url: '/static/school/file/img.png',
          class: 'video',
          name: '图片',
          type: 'img',
        },
        tif: {
          url: '/static/school/file/img.png',
          class: 'video',
          name: '图片',
          type: 'img',
        },

        // 视频
        mp4: {
          url: '/static/school/file/video.png',
          class: 'video',
          name: '视频',
          type: 'video',
        },
        wav: {
          url: '/static/school/file/video.png',
          class: 'video',
          name: '音频',
          type: 'video',
        },
        mpeg: {
          url: '/static/school/file/video.png',
          class: 'video',
          name: '音频',
          type: 'video',
        },
        video: {
          url: '/static/school/file/video.png',
          class: 'video',
          name: '视频',
          type: 'video',
        },
        flv: {
          url: '/static/school/file/video.png',
          class: 'video',
          name: '视频',
          type: 'video',
        },
        f4v: {
          url: '/static/school/file/video.png',
          class: 'video',
          name: '视频',
          type: 'video',
        },
        webm: {
          url: '/static/school/file/video.png',
          class: 'video',
          name: '视频',
          type: 'video',
        },
        m4v: {
          url: '/static/school/file/video.png',
          class: 'video',
          name: '视频',
          type: 'video',
        },
        mov: {
          url: '/static/school/file/video.png',
          class: 'video',
          name: '视频',
          type: 'video',
        },
        m2v: {
          url: '/static/school/file/video.png',
          class: 'video',
          name: '视频',
          type: 'video',
        },
        mkv: {
          url: '/static/school/file/video.png',
          class: 'video',
          name: '视频',
          type: 'video',
        },
        '3gp': {
          url: '/static/school/file/video.png',
          class: 'video',
          name: '视频',
          type: 'video',
        },
        '3gp': {
          url: '/static/school/file/video.png',
          class: 'video',
          name: '视频',
          type: 'video',
        },
        '3g2': {
          url: '/static/school/file/video.png',
          class: 'video',
          name: '视频',
          type: 'video',
        },
        rmvb: {
          url: '/static/school/file/video.png',
          class: 'video',
          name: '视频',
          type: 'video',
        },
        rm: {
          url: '/static/school/file/video.png',
          class: 'video',
          name: '视频',
          type: 'video',
        },
        wmv: {
          url: '/static/school/file/video.png',
          class: 'video',
          name: '视频',
          type: 'video',
        },
        wma: {
          url: '/static/school/file/video.png',
          class: 'video',
          name: '视频',
          type: 'video',
        },
        avi: {
          url: '/static/school/file/video.png',
          class: 'video',
          name: '视频',
          type: 'video',
        },
        asf: {
          url: '/static/school/file/video.png',
          class: 'video',
          name: '视频',
          type: 'video',
        },
        mpeg: {
          url: '/static/school/file/video.png',
          class: 'video',
          name: '视频',
          type: 'video',
        },
        // 音频
        mp3: {
          url: '/static/school/file/video.png',
          class: 'audio',
          name: '音频',
          type: 'audio',
        },
        wma: {
          url: '/static/school/file/video.png',
          class: 'audio',
          name: '音频',
          type: 'audio',
        },
        wav: {
          url: '/static/school/file/video.png',
          class: 'audio',
          name: '音频',
          type: 'audio',
        },
        ape: {
          url: '/static/school/file/video.png',
          class: 'audio',
          name: '音频',
          type: 'audio',
        },
        flac: {
          url: '/static/school/file/video.png',
          class: 'audio',
          name: '音频',
          type: 'audio',
        },
        ogg: {
          url: '/static/school/file/video.png',
          class: 'audio',
          name: '音频',
          type: 'audio',
        },
        aac: {
          url: '/static/school/file/video.png',
          class: 'audio',
          name: '音频',
          type: 'audio',
        },
      },
      itemId: '',
      animation: 'rotateZ(0deg)',
      imgDeg: 0,
    }
  },
  mounted() {
    this.launch = true
    const url = location.href
    this.configSDK(url, {
      title: '卯时数字 - 进入我的',
      desc: '打造个人数字资产专属空间',
      link: 'https://h5.onedaen.com/pages/mine/mine',
      imgUrl: 'https://publish.onedaen.com/uploads/publicImg/shareLogo.png',
    })
    if (!this.ua) return
    document.getElementsByClassName('uni-page-head__title')[0].style.display =
      'none'
  },
  onLoad(option) {
    const ua = window.navigator.userAgent.toLowerCase()
    this.ua = ua.match(/MicroMessenger/i) == 'micromessenger'
    console.log(option)
    let id = option.id
    let item_id = option.item_id
    this.itemId = option.item_id
    this.collectionId = option.id
    this.getCollectionDetail(id, item_id)
    let userInfo = uni.getStorageSync('userInfo')
    this.holdPerson = userInfo.nickName
  },
  onShow() {
    if (!this.launch) return
    const url = location.href
    this.configSDK(url, {
      title: '卯时数字 - 进入我的',
      desc: '打造个人数字资产专属空间',
      link: 'https://h5.onedaen.com/pages/mine/mine',
      imgUrl: 'https://publish.onedaen.com/uploads/publicImg/shareLogo.png',
    })
  },
  onHide() {
    this.close()
  },
  onUnload() {
    this.clear()
  },
  onPullDownRefresh() {
    this.getCollectionDetail(this.collectionId)
  },
  methods: {
    /* 获取藏品详情 */
    getCollectionDetail(id, item_id) {
      let userInfo = uni.getStorageSync('userInfo')
      let token = userInfo.token
      let uid = userInfo.uid
      api
        .myCollectionDetail({
          uid: uid,
          token: token,
          id: id,
          item_id: item_id,
        })
        .then((res) => {
          this.collection = res.data
          // this.collection.medium_url =
          //   'https://publish.onedaen.com//uploads/material/23-01-04/167281658898413.png'

          const idx = this.collection.medium_url.lastIndexOf('.')
          this.type = this.fileType[
            this.collection.medium_url.substr(idx + 1)
          ].type
          this.showIcon = this.type == 'audio' || this.type == 'video'
          // 获取设备宽高
          uni.getSystemInfo({
            success: (system) => {
              this.systemWidth = system.windowWidth / 375
            },
          })
          uni.stopPullDownRefresh()
          // this.createdPoster()
        })
    },
    async configSDK(url, { title, desc, link, imgUrl }) {
      // const url = `https://h5.onedaen.com/pages/details/series_detail?id=${this.id}`

      const upUrl = encodeURIComponent(url)
      api.shareData({ url: upUrl }).then((res) => {
        jWeixin.config({
          debug: false, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
          appId: res.data.appId, // 必填，公众号的唯一标识
          timestamp: res.data.timestamp, // 必填，生成签名的时间戳
          nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
          signature: res.data.signature, // 必填，签名
          jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'], // 必填，需要使用的 JS 接口列表
        })

        jWeixin.ready(() => {
          // 分享给朋友
          jWeixin.updateAppMessageShareData({
            title, // 分享标题
            // desc: this.activity_detail.description, // 分享描述
            desc,
            link: res.data.url,
            imgUrl, // 分享图标
            success: () => {
              // 设置成功
              console.log('设置成功')
            },
          })
          // 分享到朋友圈
          jWeixin.updateTimelineShareData({
            title, // 分享标题
            link: res.data.url,
            imgUrl, // 分享图标
            success: () => {
              console.log('设置成功')
              // 设置成功
            },
          })
        })
      })
    },
    /* 转赠 */
    // 转赠弹窗
    transfer() {
      this.transferPop = true
    },
    // 取消转赠
    transferCancel() {
      this.transferPop = false
    },
    // 确认转赠
    transferConfirm() {
      uni.showLoading()
      /* 请求接口 */
    },
    saveFile() {
      const h5URL =
        'publish.onedaen.com//uploads/material/22-12-27/167211237958974.mp3'
      const path = window.location.protocol + '//' + h5URL
      // window.location.href = path
      window.location.href = this.collection.medium_url
    },
    // 保存图片
    savePicture(url) {
      uni.showToast({
        title: '保存主文件请参考上链第五步',
        icon: 'none',
      })
      // uni.showModal({
      //   content: '确定要保存藏品到手机吗？',
      //   success: (res) => {
      //     if (res.confirm) {
      //       save.savePosterPath(url) //点击确定之后执行的代码
      //     } else {
      //       //点击取消之后执行的代码
      //     }
      //   },
      // })
    },
    // 跳转至分享海报
    jump() {
      uni.navigateTo({
        url: `/pages/mine/sharePoster?id=${this.collectionId}&itemId=${this.itemId}`,
      })
    },
    // 打开藏品主文件
    openFile() {
      if (this.isLong) return
      const idx = this.collection.medium_url.lastIndexOf('.') + 1
      const type = this.collection.medium_url.substr(idx).toLowerCase()

      this.fileInfo = {
        url: this.collection.medium_url,

        type,
        icon: this.collection.cover_url,
      }
      const name = this.fileType[type].type
      if (name == 'img') {
        // 图片藏品
        this.$nextTick(() => {
          this.$refs.file.open()
        })
      } else if (name == 'video') {
        // 视频藏品
        this.checkVideo = true
      } else {
        if (this.checkAudio) return
        // 音频藏品
        this.fileAudio = uni.createInnerAudioContext({
          useWebAudioImplement: false,
        })
        this.fileAudio.src = this.collection.medium_url
        this.fileAudio.loop = true
        // this.fileAudio.autoplay = true
        this.fileAudio.play()
        this.fileAudio.volume = 0
        this.fileAudio.onCanplay(() => {
          this.fileAudio.duration
          const timer = setInterval(() => {
            this.totalTime = parseInt(this.fileAudio.duration)
            // this.fileAudio.pause()
            if (this.fileAudio.duration) {
              console.log('currentTime', this.fileAudio.currentTime)
              this.fileAudio.volume = 1
              clearTimeout(timer)
              // this.togglePlay()
            }
          }, 100)
        })
        this.fileAudio.onTimeUpdate(() => {
          this.nowTime = parseInt(this.fileAudio.currentTime)
        })
        // 无限循环动画
        this.timer = setInterval(() => {
          if (this.playState == 'pause') {
            this.imgDeg = this.imgDeg + 1 == 360 ? 0 : this.imgDeg + 1
            this.animation = `rotateZ(${this.imgDeg}deg)`
          }
        }, 50)
        this.checkAudio = true
      }
    },
    // 切换音频播放状态
    togglePlay() {
      if (this.onChangePlay) return

      this.onChangePlay = true
      this.fileAudio.volume = 1
      if (this.playState == 'play') {
        this.fileAudio.play()
        this.playState = 'pause'
      } else if (this.playState == 'pause') {
        this.fileAudio.pause()
        this.playState = 'play'
      }
      this.onChangePlay = false
    },
    // 切换音频播放进度
    changeTime(progress) {
      this.onChanges = true
    },
    // 创建海报
    // createdPoster() {
    //   const rpx = this.systemWidth
    //   const context = uni.createCanvasContext('testCanvas', this)
    //   // 背景色
    //   context.rect(0, 0, 650 * rpx, 1500 * rpx)
    //   context.setFillStyle('#000')
    //   context.fill()
    //   //   this.showState = true

    //   // 商品主文件图
    //   uni.downloadFile({
    //     url: this.collection.cover_url,
    //     success: (res) => {
    //       context.drawImage(res.tempFilePath, 0, 0, 325 * rpx, 313 * rpx)
    //       context.draw(true)
    //     },
    //   })

    //   // 二维码
    //   uni.downloadFile({
    //     url: 'https://publish.onedaen.com/uploads/material/picture/code.jpg',
    //     success: (res) => {
    //       context.drawImage(
    //         res.tempFilePath,
    //         20 * rpx,
    //         630 * rpx,
    //         75 * rpx,
    //         75 * rpx,
    //       )
    //       context.draw(true)
    //     },
    //   })

    //   // 商品名称
    //   context.setFontSize(18 * rpx)
    //   context.setFillStyle('#fff')
    //   context.fillText(this.collection.name, 20 * rpx, 361 * rpx)

    //   // 拥有者和序号
    //   context.setFontSize(15 * rpx)
    //   context.setFillStyle('#ccc')
    //   context.fillText(`由${this.holdPerson}拥有`, 20 * rpx, 390 * rpx)
    //   // 边框
    //   context.beginPath()
    //   context.moveTo(234 * rpx, 375 * rpx)
    //   context.arcTo(300 * rpx, 375 * rpx, 300 * rpx, 395 * rpx, 4 * rpx)
    //   context.arcTo(300 * rpx, 395 * rpx, 230 * rpx, 395 * rpx, 4 * rpx)
    //   context.arcTo(230 * rpx, 395 * rpx, 230 * rpx, 375 * rpx, 4 * rpx)
    //   context.arcTo(230 * rpx, 375 * rpx, 254 * rpx, 375 * rpx, 4 * rpx)
    //   context.setStrokeStyle('#4effff')
    //   context.stroke()
    //   context.setFontSize(12 * rpx)
    //   context.setFillStyle('#4effff')
    //   context.fillText(
    //     `序号#${this.collection.collection_id}`,
    //     243 * rpx,
    //     388 * rpx,
    //   )
    //   // 发行信息
    //   context.setFontSize(12 * rpx)
    //   context.setFillStyle('#fff')
    //   context.fillText('发行商', 20 * rpx, 440 * rpx)
    //   context.fillText('发行数量', 211 * rpx, 440 * rpx)
    //   context.fillText('数字藏品ID', 20 * rpx, 478.5 * rpx)
    //   context.fillText('长按识别', 115 * rpx, 670 * rpx)
    //   context.fillText('关注“卯时数字平台”了解更多', 115 * rpx, 687 * rpx)

    //   context.setFillStyle('#ccc')
    //   context.fillText(this.collection.group_name, 75 * rpx, 440 * rpx)
    //   context.fillText(this.collection.publish_count, 283 * rpx, 440 * rpx)
    //   context.fillText(
    //     this.collection.nft_id.substr(0, 43),
    //     20 * rpx,
    //     516 * rpx,
    //   )
    //   context.fillText(this.collection.nft_id.substr(43), 20 * rpx, 536 * rpx)
    //   // line
    //   context.beginPath()
    //   context.moveTo(20 * rpx, 583 * rpx)
    //   context.lineTo(315 * rpx, 583 * rpx)
    //   context.setStrokeStyle('#999999')
    //   context.stroke()
    //   context.draw(true)
    // },
    // 离开页面
    close() {
      if (!this.checkAudio) return
      this.fileAudio.pause()
      this.playState = 'play'
    },
    // 离开页面
    clear() {
      if (!this.checkAudio) return
      this.fileAudio.stop()
      this.fileAudio.destroy()
      this.playState = 'play'
    },
    // 复制
    copy(text) {
      uni.setClipboardData({
        data: text,
        success: (res) => {
          uni.showToast({
            title: '已复制到剪切板',
            icon: 'none',
          })
        },
      })
    },
    // 开始长按
    touchStart() {
      this.timer = setTimeout(() => {
        this.isLong = true
      }, 500)
    },
    // 结束长按
    touchEnd() {
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.isLong = false
      }, 200)
    },
  },
  watch: {
    nowTime() {
      if (!this.onChanges) return
      this.fileAudio.seek(this.nowTime)
      this.onChanges = false
    },
  },
  components: {
    CheckFile,
  },
}
</script>

<style lang="scss">
page {
  height: 100%;
}

.big_img {
  width: 750rpx;
  max-height: 750rpx;
  overflow: hidden;
  background-color: #242424;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  .big-play {
    width: 100rpx;
    height: 100rpx;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.512);
    image {
      width: 100%;
      height: 100%;
    }
  }
  .big-long {
    pointer-events: none;
    img {
      pointer-events: none;
    }
  }
  ::v-deep .big-cover {
    img {
      pointer-events: auto;
    }
  }
  .check-video {
    width: 100%;
    height: 100%;
    video {
      width: 100%;
      height: 100%;
    }
  }
  .check-audio {
    font-size: 24rpx;
    display: flex;
    align-items: center;
    color: #fff;
    box-sizing: border-box;
    width: 750rpx;
    padding: 0 25rpx;
    position: absolute;
    bottom: 0;

    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    .audio-icon {
      width: 50rpx;
      height: 50rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .audio-progress {
      width: 500rpx;
      box-sizing: border-box;
      padding: 0 36rpx;
    }
    .audio-music {
      position: fixed;
      top: 20rpx;
      right: 20rpx;
      height: 20rpx;
      width: 50rpx;
      height: 50rpx;
      border-radius: 50%;
      overflow: hidden;
      background-color: rgba(0, 0, 0, 0.5);
      .disable {
        position: absolute;
        top: 0;
        left: 0;
      }
    }
  }
  image {
    width: 100%;
    height: 100%;
  }
  ::v-deep slider {
    margin: 0;
  }
}

.collection_detail {
  word-break: break-all;
  line-height: 100%;
  .collection_header {
    width: 100%;
    margin: auto;
    padding: 35rpx 50rpx;
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    background-color: #242424;

    .collection_name {
      font-size: 36rpx;
      color: #fff;
      // margin: 20rpx 0;
      line-height: 42rpx;
      margin-bottom: 27rpx;
    }

    .collection_subTitle {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 37rpx;
      line-height: 37rpx;
      font-size: 30rpx;
      // margin: 20rpx 0;

      .owner {
        color: #cccccc;

        .owner-user {
          color: #fff;
        }
      }

      .Serial_number {
        height: 37rpx;
        line-height: 37rpx;
        box-sizing: border-box;
        border: 1rpx solid #4effff;
        font-size: 24rpx;
        text-align: center;
        color: #4effff;
        padding: 0 17rpx;

        border-radius: 5rpx;
      }
    }
  }
  // 藏品内容
  .collection_content {
    width: 650rpx;
    margin: 0 auto;
    color: #fff;
    font-size: 30rpx;
    .host {
      margin: 50rpx 0 45rpx;
    }
    .issue_num {
      margin-bottom: 85rpx;
      display: flex;
      align-items: center;
      text {
        &:last-child {
          margin-left: 50rpx;
          color: #ccc;
        }
      }
    }
    .collection_nft_id {
      margin-bottom: 80rpx;
      .collection-id {
        margin-top: 35rpx;
        color: #ccc;
        line-height: 42rpx;
      }
      .nft_id {
        display: flex;
        align-items: center;
        .icon {
          margin-left: 20rpx;

          color: #fff;
        }
      }
    }
    .collection_describe {
      .collection-title {
        margin-bottom: 37rpx;
      }
      .collection-desc {
        white-space: pre-wrap;
        line-height: 44rpx;
        color: #ccc;
      }
    }
  }
}

.footer_method {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-bottom: env(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #242424;

  .btn_box {
    display: flex;

    // margin: 0 auto;
    justify-content: space-between;

    flex: 1;
    .transfer_btn {
      // width: 320rpx;
      max-width: 640rpx;
      padding: 0 20rpx;
      height: 82rpx;
      border-radius: 10rpx;
      // border: solid 1rpx #4effff;

      .button {
        // width: 320rpx;
        // height: 80rpx;
        // font-size: 30rpx;
        // background-color: #242424;
        // border-radius: 10rpx;
        // border: 0;
        // line-height: 80rpx;
        // color: #4effff;
      }
    }

    .poster_btn {
      width: 100%;
      height: 80rpx;
      // margin: auto;
      padding: 20rpx 20rpx;

      // background-color: #4effff;
      border: 0;
      .button {
        background-color: #4effff;
        height: 100%;
        border-radius: 10rpx;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}

.transfer_box {
  height: 100%;
  background-color: #181816;
  border-radius: 20rpx;
  padding: 0 20rpx;
  .transfer_content {
    .title {
      font-size: 32rpx;
      margin: 30rpx 0;
      text-align: center;
      color: #fff;
    }

    .subTitle {
      font-size: 28rpx;
      margin: 20rpx 0;
      text-align: center;
      color: #999999;
    }

    input {
      width: 90%;
      height: 52px;
      margin: 10px auto;
      background-color: #242424;
    }
  }

  .submit_btn {
    display: flex;
    width: 100%;

    button {
      width: 50%;
      background-color: #181816;
      color: #fff;
      border-radius: 0;
    }
  }
}
.share-canvas {
  width: 750rpx;
  position: fixed;
  left: -100vw;
  background-color: #181816;
  // position: relative;
  .canvas {
    width: 650rpx;
    height: 1500rpx;
    background-color: #000;
    margin: 0 auto;
  }
  .down {
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
    overflow: hidden;
    position: fixed;
    bottom: 60rpx;
    background-color: #000;
    right: 60rpx;
    // box-sizing: border-box;
    padding: 20rpx;
    border: 1rpx solid #fff;
    image {
      width: 100%;
      height: 100%;
    }
  }
}
::v-deep .u-popup__content {
  background-color: transparent !important;
}
</style>
